<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.back()"
    />
    <van-index-bar
      :index-list="indexList"
      highlight-color='#1cb676'
    >
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="(hotItem , su) in hotArray"
        :key="su"
        :title="hotItem.label"
        @click="dianji"
      />
      <!-- A-Z 城市 -->
      <template v-for="(item, index) in array">
        <van-index-anchor
          :key="list[index]"
          :index="item.length > 0 ? item[0].short[0].toUpperCase() : list[index]"
        >{{item.length > 0 ? item[0].short[0].toUpperCase() : list[index]}}
        </van-index-anchor>
        <template v-if="item.length">
          <van-cell
            v-for="(elment) in item"
            :key="elment.value"
            :title="elment.label"
            @click="dianji([elment.label,elment.value])"
          />
        </template>
        <template v-if="!item.length">
          <van-cell
            :key="index"
            title="暂无城市"
          />
        </template>
      </template>
    </van-index-bar>

  </div>
</template>

<script>
import { gethot, getcitylist } from '@/api/article'
import router from '@/router'
import { sToken, ssToken } from '@/utils/storage'
export default {
  data () {
    return {
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      hotArray: [],
      array: []
    }
  },
  methods: {
    dianji (val) {
      console.log(val)
      sToken(val[0])
      ssToken(val[1])
      router.push('/home-page')
    }
  },
  async created () {
    const res = await gethot()
    const { body } = await getcitylist()
    this.hotArray = res.body
    for (let i = 0; i < this.list.length; i++) {
      this.array.push(
        body.filter(item => item.short[0].toUpperCase() === this.list[i])
      )
    }
    console.log(this.array)
  }
}
</script>

<style>
.van-index-bar__index {
  padding: 4px 10px 0;
}
</style>
